<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水逆退散局 - 运势结果</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="../assets/css/tailwind.css">
</head>
<body class="bg-gray-100">
  <div class="phone-frame mx-auto">
    <!-- 状态栏 -->
    <div class="status-bar">
      <span>20:30</span>
      <div class="flex space-x-2">
        <i class="fas fa-signal"></i>
        <i class="fas fa-wifi"></i>
        <i class="fas fa-battery-full"></i>
      </div>
    </div>
    
    <!-- 微信小程序顶部导航 -->
    <div class="wechat-header flex items-center">
      <a href="home.html" class="text-gray-800 px-3">
        <i class="fas fa-chevron-left"></i>
      </a>
      <span class="flex-1 text-center">今日运势</span>
      <div class="w-10"></div>
    </div>
    
    <!-- 主内容区域 -->
    <div class="app-content p-4 bg-gray-50">
      <!-- 日期信息 -->
      <div class="text-center mb-4">
        <div class="text-sm text-gray-500">2024年6月15日 星期六</div>
        <div class="text-xs text-gray-400 mt-1">农历五月初十</div>
      </div>
      
      <!-- 运势总览卡片 -->
      <div class="fortune-card p-5 mb-6">
        <div class="flex justify-between items-center mb-4">
          <div>
            <h2 class="text-xl font-bold text-white">今日运势</h2>
            <p class="text-white text-opacity-80 text-sm">水逆期运势提醒</p>
          </div>
          <div class="fortune-level">80</div>
        </div>
        
        <div class="space-y-4">
          <div>
            <div class="flex justify-between mb-1">
              <span class="text-white text-opacity-90 text-sm">整体运势</span>
              <span class="text-white text-opacity-90 text-sm">良好</span>
            </div>
            <div class="w-full bg-white bg-opacity-20 rounded-full h-2">
              <div class="bg-white h-2 rounded-full" style="width: 80%"></div>
            </div>
          </div>
          
          <div>
            <div class="flex justify-between mb-1">
              <span class="text-white text-opacity-90 text-sm">事业运</span>
              <span class="text-white text-opacity-90 text-sm">一般</span>
            </div>
            <div class="w-full bg-white bg-opacity-20 rounded-full h-2">
              <div class="bg-white h-2 rounded-full" style="width: 60%"></div>
            </div>
          </div>
          
          <div>
            <div class="flex justify-between mb-1">
              <span class="text-white text-opacity-90 text-sm">财运</span>
              <span class="text-white text-opacity-90 text-sm">优秀</span>
            </div>
            <div class="w-full bg-white bg-opacity-20 rounded-full h-2">
              <div class="bg-white h-2 rounded-full" style="width: 85%"></div>
            </div>
          </div>
          
          <div>
            <div class="flex justify-between mb-1">
              <span class="text-white text-opacity-90 text-sm">健康运</span>
              <span class="text-white text-opacity-90 text-sm">良好</span>
            </div>
            <div class="w-full bg-white bg-opacity-20 rounded-full h-2">
              <div class="bg-white h-2 rounded-full" style="width: 75%"></div>
            </div>
          </div>
          
          <div>
            <div class="flex justify-between mb-1">
              <span class="text-white text-opacity-90 text-sm">人际运</span>
              <span class="text-white text-opacity-90 text-sm">一般</span>
            </div>
            <div class="w-full bg-white bg-opacity-20 rounded-full h-2">
              <div class="bg-white h-2 rounded-full" style="width: 65%"></div>
            </div>
          </div>
        </div>
        
        <div class="mt-5 flex justify-between">
          <a href="detail.html" class="bg-white bg-opacity-20 text-white py-2 px-4 rounded-full text-sm flex items-center">
            <span>详细解读</span>
            <i class="fas fa-chevron-right ml-1 text-xs"></i>
          </a>
          <a href="advice.html" class="bg-white bg-opacity-20 text-white py-2 px-4 rounded-full text-sm flex items-center">
            <span>运势建议</span>
            <i class="fas fa-chevron-right ml-1 text-xs"></i>
          </a>
        </div>
      </div>
      
      <!-- 运势解析 -->
      <div class="bg-white rounded-lg shadow-md p-5 mb-5">
        <h3 class="font-bold text-gray-800 mb-3">今日运势解析</h3>
        <p class="text-gray-600 text-sm leading-relaxed">
          今日整体运势良好，水逆退散趋势明显。财运方面表现优异，适合进行投资理财活动。
          事业运一般，谨慎沟通，避免误解。人际关系需要多加耐心，避免冲突。
          健康状况良好，但仍需注意休息，避免过度劳累。
        </p>
      </div>
      
      <!-- 幸运信息 -->
      <div class="bg-white rounded-lg shadow-md p-5 mb-16">
        <h3 class="font-bold text-gray-800 mb-3">今日幸运提示</h3>
        <div class="grid grid-cols-2 gap-4">
          <div class="border border-gray-200 rounded-lg p-3">
            <div class="text-sm text-gray-500 mb-1">幸运色</div>
            <div class="flex items-center">
              <div class="w-6 h-6 rounded-full bg-blue-500 mr-2"></div>
              <span class="text-gray-800">蓝色</span>
            </div>
          </div>
          <div class="border border-gray-200 rounded-lg p-3">
            <div class="text-sm text-gray-500 mb-1">幸运数字</div>
            <div class="flex items-center">
              <span class="text-gray-800">8, 13</span>
            </div>
          </div>
          <div class="border border-gray-200 rounded-lg p-3">
            <div class="text-sm text-gray-500 mb-1">吉利方位</div>
            <div class="flex items-center">
              <i class="fas fa-compass text-yellow-500 mr-2"></i>
              <span class="text-gray-800">东南方</span>
            </div>
          </div>
          <div class="border border-gray-200 rounded-lg p-3">
            <div class="text-sm text-gray-500 mb-1">贵人星座</div>
            <div class="flex items-center">
              <i class="fas fa-star text-yellow-500 mr-2"></i>
              <span class="text-gray-800">金牛座</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部标签栏 -->
    <div class="fixed bottom-0 left-0 right-0 h-14 bg-white border-t border-gray-200 flex justify-around items-center" style="width: 374px;">
      <a href="home.html" class="flex flex-col items-center">
        <i class="fas fa-home text-xl text-blue-500"></i>
        <span class="text-xs mt-1 text-blue-500">首页</span>
      </a>
      <a href="#" class="flex flex-col items-center">
        <i class="fas fa-history text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-400">历史</span>
      </a>
      <a href="profile.html" class="flex flex-col items-center">
        <i class="fas fa-user text-xl text-gray-400"></i>
        <span class="text-xs mt-1 text-gray-400">我的</span>
      </a>
    </div>
  </div>
</body>
</html> 